let debug=true

function log(...args) {
    if (debug) {
        console.log(...args)
    }
}
function dir(...args) {
    if (debug){
        console.dir(...args)
    }
}

let settings={
        "slience": [],
        "ticks": [],
        "notifiers": {
        "toast": true
        },
    }

function get_setting() {
    console.log('try to get setting...')
    fetch('/settings')
    .then(res=>res.json())
    .then(data=>{
        log('get setting ok')
        dir(data)
        settings=data
    })
    .then(()=>{
        create_slience()
        create_ticks()
        create_modifiers()
    })
    .catch(e=>{
        console.log('get setting failed!')
        console.dir(e)
    })
}

get_setting()

function create_slience() {    
    //initialize slience area
    const slience_box=document.querySelector('.grid-box.slience')
    for (let index = 0; index < 24; index++) {
        let cell=document.createElement('div')
        cell.className='grid-cell'
        let checkbox=document.createElement('input')
        checkbox.setAttribute('type','checkbox')
        checkbox.setAttribute('name','slience')
        checkbox.setAttribute('id','hour-'+index)
        checkbox.setAttribute('value',index)
        checkbox.className='toggle-btn'
    
        if (settings['slience'].indexOf(index)>=0) checkbox.checked=true
    
    
        cell.appendChild(checkbox)
        let label=document.createElement('label')
        label.setAttribute('for','hour-'+index)
        label.textContent=index
        label.className='toggle-btn'
        cell.appendChild(label)
        slience_box.appendChild(cell)
    }
}

function create_ticks() {    
    //initialize ticks box
    const ticks_box=document.querySelector('.grid-box.ticks')
    for (let index = 0; index <12; index++) {
        let cell=document.createElement('div')
        cell.className='grid-cell'
        let checkbox=document.createElement('input')
        checkbox.setAttribute('type','checkbox')
        checkbox.setAttribute('name','ticks')
        checkbox.setAttribute('id','tick-'+index)
        checkbox.setAttribute('value',index)
        checkbox.className='toggle-btn'
        if (settings['ticks'].indexOf(index*5)>=0) checkbox.checked=true
        cell.appendChild(checkbox)
        let label=document.createElement('label')
        label.setAttribute('for','tick-'+index)
        label.textContent=index*5
        label.className='toggle-btn'
        cell.appendChild(label)
        ticks_box.appendChild(cell)
    }
}


function create_modifiers(){
    const notifier_box=document.querySelector('.inline-box.notifiers')
    let notifiers=settings['notifiers']
    for (let notifier in notifiers){
        let checkbox=document.createElement('input')
        checkbox.className='toggle-btn'
        checkbox.setAttribute('type','checkbox')
        checkbox.setAttribute('name','notifiers')
        checkbox.setAttribute('id',notifier)
        checkbox.setAttribute('value',notifier)

        if (notifiers[notifier]) {
            checkbox.checked=true
        }

        notifier_box.appendChild(checkbox)

        let label=document.createElement('label')
        label.setAttribute('for',notifier)
        label.textContent=notifier
        label.className='toggle-btn'
        notifier_box.appendChild(label)
    }
}

function update_setting(event){
    if (event.target.tagName!='INPUT') return
    let ele=event.target
    if (update_ticks(ele)) return
    if (update_slience(ele)) return
    if (update_notifiers(ele)) return
    log('update settings failed!')
    dir(event)
}

function update_ticks(ele) {
    if (ele.name!='ticks') {
        return false
    }
    let val=parseInt(ele.value)*5
    let idx =settings[ele.name].indexOf(val)
    if (ele.checked){
        if (idx<0){
            settings[ele.name].push(val)
        }
    }else{
        if (idx>=0){
            settings[ele.name].splice(idx,1)
        }
    }
    dir(settings)
    return true
}

function update_slience(ele) {
    if (ele.name!='slience') {
        return false
    }
    let val=parseInt(ele.value)
    let idx =settings[ele.name].indexOf(val)
    if (ele.checked){
        if (idx<0){
            settings[ele.name].push(val)
        }
    }else{
        if (idx>=0){
            settings[ele.name].splice(idx,1)
        }
    }
    dir(settings)
    return true
}

function update_notifiers(ele) {
    if (ele.name!='notifiers') {
        return false
    }
    settings[ele.name][ele.value]=ele.checked
    dir(settings)
    return true
}

const form=document.querySelector('#setting-form')
form.addEventListener('change',update_setting)

function submit_setting(){
    fetch('/settings',{
        body:JSON.stringify(settings),
        method:'POST',
        headers:{
            'Content-Type':'application/json'
        }
    })
    .then(res=>{
        if (res.status==200) {
            alert('更新设置成功!')
            start_countdown()
        }else{
            alert('更新设置失败！\n')
        }
    
    })
}

document.getElementById('confirm-btn').addEventListener('click',submit_setting)